<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>消费者消息中心</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/csm_msg.css">
    <script src="/js/Message_Center.js"></script>
</head>
<body>
    <%@ include file="consumer_navbar.jsp" %>
    <div class="container">
        <!-- 页面标题 -->
        <div class="header">消息中心</div>
        <!-- 页面内容 -->
        <section class="message-section">
            <div class="message-list">
                <h2>最新消息</h2>
                <ul>
                    <c:choose>
                        <c:when test="${not empty messages}">
                            <c:forEach var="msg" items="${messages}" varStatus="status">
                                <li>
                                    <div class="message-item" onclick="showMessageDetail('${status.index}')">
                                        <span class="message-title">${msg.cropType}</span>
                                        <span class="message-from">时间: ${msg.dateTime}</span>
                                    </div>
                                    <div id="hidden-message-detail-${status.index}" style="display:none;">
                                        <p>位置：${msg.location}</p>
                                        <p>面积：${msg.area}平方米</p>
                                        <p>平均温度：${msg.avgTemp}°C</p>
                                        <p>最高温度：${msg.maxTemp}°C</p>
                                        <p>最低温度：${msg.minTemp}°C</p>
                                        <p>空气质量：${msg.airQuality}</p>
                                        <p>PM2.5：${msg.pm25}</p>
                                        <p>湿度：${msg.humidity}</p>
                                        <p>气压：${msg.pressure}</p>
                                        <p>紫外线指数：${msg.uvIndex}</p>
                                        <p>土壤pH值：${msg.soilPh}</p>
                                        <p>土壤湿度：${msg.soilMoisture}</p>
                                        <p>施肥记录：${msg.fertilizeRecord}</p>
                                        <p>田间操作：${msg.fieldOperation}</p>
                                        <p>病虫害预警：${msg.pestWarning}</p>
                                        <p>降雨预警：${msg.rainWarning}</p>
                                    </div>
                                </li>
                            </c:forEach>
                        </c:when>
                        <c:otherwise>
                            <li>
                                <div class="message-item">
                                    <span class="message-title">暂无消息</span>
                                </div>
                            </li>
                        </c:otherwise>
                    </c:choose>
                </ul>
            </div>
            <div class="message-detail-view">
                <h2>消息详情</h2>
                <div id="message-detail-content" class="message-detail">
                    <p>请点击左侧的消息查看详情。</p>
                </div>
            </div>
        </section>
    </div>
    <!-- 注：Controller需传递messages(List<Messages>)到model中 -->
</body>
</html>